<nz-spin [nzSpinning]="loading" [nzDelay]="500">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="userName">用户名</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="用户名不能为空且长度小于20">
        <input nz-input formControlName="userName" id="userName"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="userAccount">账号</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="账号不能空为且长度小于20">
        <input nz-input formControlName="userAccount" id="userAccount" [attr.disabled]="!!pid"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="enable">是否可用</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select [formControlName]="'enable'">
          <nz-option nzValue="1" nzLabel="是"></nz-option>
          <nz-option nzValue="2" nzLabel="否"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-row [nzJustify]="'center'" *ngIf="!!pid" class="tag-row">
      <nz-tag *ngFor="let r of teamRoles"  [nzColor]="'#ad6800'">
        <i nz-icon nzType="tag"></i>
        {{r.roleName}}
      </nz-tag>
      <nz-tag *ngFor="let r of roles" nz-popconfirm [nzColor]="'#2db7f5'"
              [nzPopconfirmTitle]="'Are you sure delete this role:'+r.roleName+' ?'"
              (nzOnConfirm)="deleteRole(r.pid)">
        <i nz-icon nzType="tag"></i>
        {{r.roleName}}
      </nz-tag>
      <nz-tag class="editable-tag" (click)="addRoleDialog()">
        <i nz-icon nzType="plus"></i>
        Add Role
      </nz-tag>
    </nz-row>
    <nz-form-item nz-row class="register-area">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button nzType="primary" [disabled]="!validateForm.valid || loading">保存</button>
      </nz-form-control>
    </nz-form-item>
  </form>

</nz-spin>

